<!--房源筛选-->
<template>
  <el-container>
    <!--头部开始-->
    <el-header>
      <Header></Header>
    </el-header>
    <!--头部结束-->
    <!--主体 开始-->
    <el-main>
      <!--主体上部分 筛选区域 开始-->
      <div class="selectUpDiv">
        <el-row>
          <el-col :span="24">
            售价：
            <span class="optionContent">
              <a class="pricec" @click="pick(null,null,1,$event)">不限</a><a @click="pick(null,100,1,$event)" class="pricec">100万以下</a><a
                class="pricec" @click="pick(100,150,1,$event)">100-150万</a><a class="pricec" @click="pick(150,200,1,$event)">150-200万</a><a
                class="pricec" @click="pick(200,250,1,$event)">200-250万</a><a class="pricec" @click="pick(250,300,1,$event)">250-300万</a><a
                class="pricec" @click="pick(300,null,1,$event)">300万以上</a>
              <el-form :inline="true" :model="houseForm" class="demo-form-inline priceDiv">
                <el-form-item>
                  <el-input type="number" clearable v-model.number="houseForm.minprice" placeholder="最小价格"></el-input>
                </el-form-item>-
                <el-form-item>
                  <el-input type="number" clearable v-model.number="houseForm.maxprice" placeholder="最大价格"></el-input>
                </el-form-item>
                <el-form-item>
                  <!-- <el-button type="success" @click="getHouseAll">查询</el-button> -->
                  <el-button type="success" @click="sendBtn(1,$event)" id="pricecbtn">查询</el-button>
                </el-form-item>
              </el-form>
            </span>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            面积：
            <span class="optionContent">
              <a class="areasc" @click="pick(null,null,2,$event)">不限</a><a class="areasc" @click="pick(null,50,2,$event)">50m²以下</a><a
                class="areasc" @click="pick(50,70,2,$event)">50-70m²</a><a class="areasc" @click="pick(70,90,2,$event)">70-90m²</a><a
                class="areasc" @click="pick(90,110,2,$event)">90-110m²</a><a class="areasc" @click="pick(110,130,2,$event)">110-130m²</a><a
                class="areasc" @click="pick(130,null,2,$event)">130m²以上</a>
              <el-form :inline="true" :model="houseForm" class="demo-form-inline priceDiv">
                <el-form-item>
                  <el-input type="number" clearable v-model.number="houseForm.minareas" placeholder="最小面积"></el-input>
                </el-form-item>-
                <el-form-item>
                  <el-input type="number" clearable v-model.number="houseForm.maxareas" placeholder="最大面积"></el-input>
                </el-form-item>
                <el-form-item>
                  <!-- <el-button type="success" @click="getHouseAll" >查询</el-button> -->
                  <el-button type="success" @click="sendBtn(2,$event)" id="areascbtn">查询</el-button>
                </el-form-item>
              </el-form>
            </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            区域：
            <span class="optionContent">
              <a class="addressc" @click="pick('',null,3,$event)">不限</a><a class="addressc" @click="pick('北京',null,3,$event)">北京</a><a
                class="addressc" @click="pick('上海',null,3,$event)">上海</a><a class="addressc" @click="pick('深圳',null,3,$event)">深圳</a><a
                class="addressc" @click="pick('湖南',null,3,$event)">湖南</a><a class="addressc" @click="pick('江西',null,3,$event)">江西</a><a
                class="addressc" @click="pick('浙江',null,3,$event)">浙江</a>
              <el-form :inline="true" :model="houseForm" class="demo-form-inline priceDiv">
                <el-form-item>
                  <el-cascader v-model="ss" size="large" :options="options" @change="handleChange">
                  </el-cascader>
                </el-form-item>
              </el-form>
            </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            户型：
            <!-- 0全 1三室 2四室 3五室 4五室以上 -->
            <span class="optionContent">
              <a class="apartc" @click="pick(null,null,4,$event)">不限</a><a class="apartc" @click="pick(1,null,4,$event)">三室</a><a
                class="apartc" @click="pick(2,null,4,$event)">四室</a><a class="apartc" @click="pick(3,null,4,$event)">五室</a><a
                class="apartc" @click="pick(4,null,4,$event)">五室以上</a>
            </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            楼层：
            <!--几层楼0全 1:6层以下 2:6-12层 3 12层以上-->
            <span class="optionContent">
              <a class="floorc" @click="pick(null,null,5,$event)">不限</a><a class="floorc" @click="pick(1,null,5,$event)">6层以下</a><a
                class="floorc" @click="pick(2,null,5,$event)">6-12层</a><a class="floorc" @click="pick(3,null,5,$event)">12层以上</a>
            </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            档次：
            <!--level1经济型2中档型3高档型4豪华型-->
            <span class="optionContent">
              <a class="levelc" @click="pick(null,null,6,$event)">不限</a><a class="levelc" @click="pick(1,null,6,$event)">经济型</a><a
                class="levelc" @click="pick(2,null,6,$event)">中档型</a><a class="levelc" @click="pick(3,null,6,$event)">高档型</a><a
                class="levelc" @click="pick(4,null,6,$event)">豪华型</a>
            </span>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="12">
            默认排序：
            <span class="optionContent">
              <a class="browsec" @click="pick(null,null,7,$event)">不限</a><a class="browsec" @click="pick(1,null,7,$event)">价格</a><a
                class="browsec" @click="pick(0,null,7,$event)">浏览量</a>
            </span>
          </el-col>
          <el-col :span="12">
            <el-input style="width:250px;" placeholder="请输入标题关键字" v-model.lazy="houseForm.housetitle" clearable @change="getHouseAll"
              @clear="getHouseAll">
              <el-button slot="append" icon="el-icon-search" @click="getHouseAll"></el-button>
            </el-input>
            <span style="margin-left:85px;font-size: 18px;">一共有<b style="color: #AA1111; font-size: 30px;">{{total}}</b>套</span>
          </el-col>
        </el-row>

      </div>
      <!--主体上部分 筛选区域 结束-->
      <!--主体下部分 展示筛选出的房源 开始-->
      <div class="selectDownDiv">
        <div class="houseDiv" v-for="item in houselist" :key="item.houseid">
          <img :src="item.imgurl" />
          <span class="house_address">
            <p> 【{{item.areaname}}】{{item.address}}</p>
          </span>
          <p class="ptag houseTitle"><i class="el-icon-s-home"></i>{{item.housetitle}}</p>
          <div class="listleft">
            <!--level1经济型2中档型3高档型4豪华型-->
            <p class="ptag" v-show="item.level===1">经济型</p>
            <p class="ptag" v-show="item.level===2">中档型</p>
            <p class="ptag" v-show="item.level===3">高档型</p>
            <p class="ptag" v-show="item.level===4">豪华型</p>
            <p class="ptag"><span>{{item.areas}}㎡</span>
              <!--户型-->
              <span v-show="item.apartment===1">三室</span>
              <span v-show="item.apartment===2">四室</span>
              <span v-show="item.apartment===3">五室</span>
              <span v-show="item.apartment===4">五室以上</span>
            </p>
          </div>
          <div class="listright">
            <p class="ptag pricefont">{{item.houseprice}}</p>
            <p class="ptag">万元/㎡</p>
          </div>
        </div>
        <!--循环结束-->
      </div>
      <!--主体下部分 展示筛选出的房源 结束-->
      <!-- 分页区域 -->
      <el-pagination style="text-align: center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

    </el-main>
    <!--主体 结束-->
  </el-container>
</template>

<script>
  import Header from '../../components/main/Header.vue' //头部
  //引入三级联动 依赖js
  import {
    provinceAndCityData,
    regionData,
    provinceAndCityDataPlus,
    regionDataPlus,
    CodeToText,
    TextToCode
  } from 'element-china-area-data'

  export default {
    components: {
      Header
    },
    data() {
      return {
        //三级联动
        options: regionData,
        ss: '请选择',

        //筛选参数
        houseForm: {
          maxprice: null, //最大价格
          minprice: null, //最小价格
          minareas: null, //最小面积
          maxareas: null, //最大面积
          elevator: '无', //电梯
          apartment: null, //户型
          level: null, //档次
          floor: null, //楼层
          browse: null, //浏览量
          address: '', //地址
          housetitle: '' //搜索房源标题
        },
        // 获取房源列表的参数对象
        queryInfo: {
          query: '', // 搜索关键词
          // 当前的页数
          pagenum: 1,
          // 当前每页显示多少条数据
          pagesize: 10
        },
        houselist: [], // 所有房源集合
        total: 0, // 总条数
      }
    },
    mounted() {
      this.getHouseAll(); //获取所有上架的新房源信息
    },
    methods: {
      //获取所有上架的新房源信息
      async getHouseAll() {
        //获取主页搜索框的关键词
        if (this.$route.query.keys != '') {
          this.houseForm.housetitle = this.$route.query.keys;
          this.$route.query.keys = '';
        }

        const {
          data: res
        } = await this.$axios.get('HouseController/findHouseAll.action', {
          params: {
            minprice: this.houseForm.minprice, //价格最小值
            maxprice: this.houseForm.maxprice, //价格最大值
            minareas: this.houseForm.minareas, //面积最小值
            maxareas: this.houseForm.maxareas, //面积最大值
            housetitle: this.houseForm.housetitle, //标题关键字
            apartment: this.houseForm.apartment, //户型
            level: this.houseForm.level, //档次
            floor: this.houseForm.floor, //楼层
            browse: this.houseForm.browse, //浏览量
            address: this.houseForm.address, //地址
            state: 1, // 状态
            htype: '新房', //新房
            page: this.queryInfo.pagenum, // 当前页
            count: this.queryInfo.pagesize // 当前页显示条数
          }
        })
        console.log(res)
        if (!res) {
          return this.$message.error('未查询到数据！')
        }
        this.houselist = res.houses
        this.total = res.total
      },
      // 监听 pagesize 改变的事件
      handleSizeChange(newSize) {
        // console.log(newSize)
        this.queryInfo.pagesize = newSize
        this.getHouseAll() // 重新获取数据
      },
      // 监听 页码值 改变的事件
      handleCurrentChange(newPage) {
        // console.log(newPage)
        this.queryInfo.pagenum = newPage
        this.getHouseAll() // 重新获取数据
      },
      //点击筛选页查询按钮(价格和面积)
      sendBtn(type, event) {
        var obj = []; //装同级元素的数组
        if (type === 1) { //价格范围查询
          obj = document.getElementsByClassName('pricec'); //获取同级的元素
        } else if (type === 2) { //面积范围查询
          obj = document.getElementsByClassName('areasc'); //获取同级的元素
        }
        //将同级的高亮颜色取消，一致为默认的
        for (var i = 0; i < obj.length; i++) {
          obj[i].style.color = "black"; //设置相同的颜色
        }
        //设置当前按钮的背景颜色点亮并查询数据
        event.currentTarget.style.backgroundColor = "#00ac84"; //高亮该元素
        this.getHouseAll(); //发送查询请求
      },

      //点击某个筛选项时
      pick(min, max, type, event) { //type代表不同类型的筛选条件
        var obj = []; //装同级元素的数组
        if (type === 1) { //价格
          obj = document.getElementsByClassName('pricec'); //获取同级的元素
          this.houseForm.minprice = min;
          this.houseForm.maxprice = max;
          //将按钮颜色还原
          document.getElementById('pricecbtn').style.backgroundColor = "#63AD02";
        } else if (type === 3) { //地址
          this.ss = '请选择';
          obj = document.getElementsByClassName('addressc'); //获取同级的元素
          this.houseForm.address = min;
        } else if (type === 2) { //面积
          obj = document.getElementsByClassName('areasc'); //获取同级的元素
          this.houseForm.minareas = min;
          this.houseForm.maxareas = max;
          //将按钮颜色还原
          document.getElementById('areascbtn').style.backgroundColor = "#63AD02";
        } else if (type === 4) { //户型 几室几厅
          obj = document.getElementsByClassName('apartc'); //获取同级的元素
          this.houseForm.apartment = min;
        } else if (type === 5) { //楼层
          obj = document.getElementsByClassName('floorc'); //获取同级的元素
          this.houseForm.floor = min;
        } else if (type === 6) { //档次
          obj = document.getElementsByClassName('levelc'); //获取同级的元素
          this.houseForm.level = min;
        } else if (type === 7) { //浏览量
          obj = document.getElementsByClassName('browsec'); //获取同级的元素
          this.houseForm.browse = min;
        }
        //将同级的高亮颜色取消，一致为默认的
        for (var i = 0; i < obj.length; i++) {
          obj[i].style.color = "black"; //设置相同的颜色
        }
        //设置当前按钮的字体颜色点亮并查询数据
        event.currentTarget.style.color = "#00ac84"; //高亮字体元素
        this.getHouseAll(); //发送查询请求
      },
      //三级联动
      handleChange(val) {
        //获取地址
        let obj = document.getElementsByClassName('addressc'); //获取同级的元素
        for (var i = 0; i < obj.length; i++) {
          obj[i].style.color = "black"; //设置相同的颜色
        }
        var v = CodeToText[val[0]] + '-' + CodeToText[val[1]] + '-' + CodeToText[val[2]];
        // console.log(v);
        this.houseForm.address = v;
        this.getHouseAll();
      }
    }


  }
</script>

<style scoped>
  /*主体上部分 筛选区域*/
  .selectUpDiv {
    margin: 15px auto;
    height: 385px;
    width: 90%;
    border: 1px solid #e9e9e8;
  }

  .el-row {
    margin-left: 20px;
    margin-top: 10px;
  }

  /*每个筛选项内容*/
  .el-col span a,
  .priceDiv {
    margin-left: 12px;
  }

  /*价格区间筛选*/
  .priceDiv {
    display: inline-block;
    height: 26px;
    line-height: 26px;
    vertical-align: bottom;
  }

  .el-input {
    width: 90px;
    height: 26px;
    line-height: 26px;
  }

  /*给’全部‘字段设置颜色*/
  .optionContent a:nth-child(1) {
    color: #00ac84;
  }


  /*主体下部分 展示筛选出的房源*/
  .selectDownDiv {
    margin: 0 auto;
    height: 800px;
    width: 85%;
    border-top: 1px solid #00AC84;
  }

  .selectDownDiv .houseDiv {
    position: relative;
    float: left;
    width: 233px;
    height: 285px;
    border: 3px solid #F0F0F0;
    margin: 10px;
  }

  .houseDiv:hover {
    border: 3px solid #00AC84;
  }

  .selectDownDiv .houseDiv img {
    width: 100%;
    height: 185px;
  }

  .house_address {
    position: absolute;
    width: 233px;
    height: 45px;
    top: 140px;
    background: url(../../assets/images/back.png) repeat 0 0;
    color: #fff;
    line-height: 23px;
  }

  .listleft {
    float: left;
    width: 56%;
    height: 70px;
    border-right: 1px dotted #CCCCCC;
  }

  .listright {
    float: right;
    width: 40%;
    height: 70px;
  }

  .ptag {
    margin-top: 12px;
    margin-left: 3px;
    color: #3C3C3C;
    font-size: 15px;
  }

  .ptag span {
    border: 1px solid #63AD02;
    border-radius: 10px;
    margin-right: 3px;
    color: #3C3C3C;
    font-size: 15px;
    padding: 3px;
  }

  .pricefont {
    color: #fd4d39;
    font-size: 18px;
  }

  .houseTitle {
    font-size: 17px;
    color: #666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  a {
    cursor: pointer;
  }
</style>
